<template>
  <FoldBox>
    <template #bd>
      <a-row style="margin-top: 8px">
        <a-col :span="6">外环半径</a-col>
        <a-col :span="18" style="text-align: right">
          <a-input-number
            v-model:value="dataConfig.radius"
            :max="1"
            :min="0.01"
            :step="0.01"
            size="small"
            @change="change"
          />
        </a-col>
      </a-row>
      <a-row style="margin-top: 8px">
        <a-col :span="6">内环半径</a-col>
        <a-col :span="18" style="text-align: right">
          <a-input-number
            v-model:value="dataConfig.innerRadius"
            :max="1"
            :min="0.01"
            :step="0.01"
            size="small"
            @change="change"
          />
        </a-col>
      </a-row>
    </template>
  </FoldBox>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import FoldBox from '../_source/foldBox.vue';
  import { cloneDeep } from 'lodash';

  export default defineComponent({
    components: { FoldBox },
    props: {
      config: {
        type: Object,
      },
    },
    data() {
      return {
        dataConfig: {},
      };
    },

    created() {
      this.init();
    },

    methods: {
      init() {
        this.dataConfig = cloneDeep(this.config);
      },

      change() {
        this.$emit('change', this.dataConfig);
      },
    },
  });
</script>
